<script setup lang="ts">
import china from '@/assets/images/transfer/design/china.png';
</script>

<template>
  <div class="transfer-chinaMap">
    <div class="container">
      <div class="topBox">
        <div class="title">
          <span class="left">全国</span>
          <span class="right">传输网</span>
        </div>
        <img class="chinaMap" v-lazy="china" alt="" />
      </div>
      <div class="contentBox">
        <div class="left">
          在珠三角地区部署了一张传统以太网以及一张高性能高稳定的PTN传输网：以【北上广深】为传输环网，扩展至全国；IDC节点、接入节点、云节点等网络节点已有近800个（IDC机房300+、工业园区/写字楼500+）。
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.transfer-chinaMap {
  background-color: #f4ecff;
  padding: 70px 0;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .topBox {
      .title {
        margin-bottom: 0px;
        text-align: center;
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 28px;
        letter-spacing: 4px;
        font-family: 'SourceHanSansCN-Normal';
        .right {
          color: #484848;
        }
        .left {
          font-weight: 700;
          /* 定义渐变色背景 */
          background: linear-gradient(to right, #5b9bc7, #3e5898);
          /* 设置背景剪切区域为文本 */
          -webkit-background-clip: text;
          /* 设置文本填充颜色为透明，只显示渐变色背景 */
          -webkit-text-fill-color: transparent;
        }
      }

      .chinaMap {
        width: 960px;
      }
    }

    .contentBox {
      // height: 200px;
      margin-top: -75px;
      width: 100%;
      max-width: 800px;
      display: flex;
      justify-content: center;
      .left {
        padding-top: 80px;
        max-width: 220px;
        font-family: 'SourceHanSansCN-Light';
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 1px;
        color: #040404;
        margin-right: 20px;
      }
      .right {
        flex: 1;
        width: 100%;
        min-height: 400px;
        max-width: 730px;
        background-image: url('@/assets/images/transfer/design/backbone_network.png');
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
    }
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .transfer-chinaMap {
    .container {
      .contentBox {
        margin-top: -60px;
        .left {
          padding-top: 20px;
        }
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .transfer-chinaMap {
    .container {
      .title {
        margin-bottom: 0px;
      }
      .contentBox {
        margin-top: -40px;
        .left {
          width: 160px;
          padding-top: 20px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
